{include file="public/head"}

<body>
<div id="wrapper">
    {include file="public/menu"}

    <div id="page-wrapper" class="gray-bg dashbard-1">
        {include file="public/nav"}
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-10">
                <h2>会员组织</h2>
                <ol class="breadcrumb">
                    <li>
                        <a href="{:url('Index/index')}">主页</a>
                    </li>
                    <li>
                        <a>会员组织</a>
                    </li>
                    <li>
                        <strong>会员组织</strong>
                    </li>
                </ol>
            </div>
            <div class="col-lg-2">

            </div>
        </div>
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>会员组织</h5>
                        </div>

                        <div class="ibox-content">
                                <div class="row">
                                    <form method="get" action="{:url('User/RecommendMap2')}">
                                        <div class="col-sm-5 m-b-xs text-right col-xs-8">
                                            <input type="text" placeholder="输入账号快速查找" class="input-sm form-control input-s-sm inline" id="username" name="username" value="{$UserName|default=''}">
                                        </div>
                                        <div class="col-sm-2 m-b-xs col-xs-4">
                                            <button class="btn btn-sm btn-primary" type="submit" id="search"><i class="fa fa-search"></i> 搜索</button>
                                        </div>

                                    </form>
                                    <div class="col-sm-5 m-b-xs col-xs-4">
                                        <button class="btn btn-sm btn-danger" onclick="window.location.href = '{:url("User/UserAdd")}'"><i class="fa fa-search"></i> 新增会员</button>
                                    </div>
                                </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="tree">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        {include file="public/foot"}
    </div>
</div>
<style>
    ul,li{list-style-type:none;}
    .tree{display:block;position:relative;padding:5px 15px;overflow-x: scroll}
    .tree span{display:inline-block;box-sizing:border-box;height:30px;line-height:28px;min-width:60px;text-align:center;color:#888;border:1px solid #ddd;border-radius:5px;padding:0 8px;white-space: nowrap}
    .tree ul{position:relative;padding-left:60px;margin:0;}
    .tree ul>li{position:relative;padding:5px 0;}
    .tree>ul{padding:0;margin:0;}

    /** 水平方向连线 */
    .tree>ul ul>li:after{content:' ';position:absolute;top:20px;left:-45px;width:45px;border:none;border-top:1px solid #ddd;}
    /** 垂直方向连线 */
    .tree ul>li:not(:last-child):before{content:' ';position:absolute;top:0;left:-45px;height:100%;border:none;border-left:1px solid #ddd;}
    .tree ul>li:last-child:before{content:' ';position:absolute;top:0;left:-45px;height:20px;border:none;border-left:1px solid #ddd;}
    /** 控制鼠标移上去的颜色 */
    .tree span:hover, .tree span:hover+ul span{color:#fff;background-color:orange;}
    .tree span:hover, .tree span:hover+ul span, .tree span:hover+ul li:before, .tree span:hover+ul li:after{border-color:orange;}
    /** 折叠图标 */
    .tree .fa:before{margin-right:5px;}
    .tree .fa-minus-circle, .tree .fa-plus-circle{cursor:pointer;}
</style>
</div>
{include file="public/footer"}
<script>
    /*条件搜索*/
    var searchurl = "{:url('User/RecommendMap2')}";
    $('#search').click(function () {
        $('form').attr('action',searchurl);
    });
</script>
<script type="text/javascript" >
    (function(name){
        var tree, outer, defaultDateFormat;

        console.log(1)
        outer = {
            setData : setData,
        };

        defaultDateFormat = {
            unfold : true,
            name : 'name',
            childName : 'children'
        };

        function getDataFormat(dataFormat){
            var index;
            if(!dataFormat){
                return defaultDateFormat;
            }
            for(index in defaultDateFormat){
                dataFormat[index] = typeof dataFormat[index] == 'undefined'? defaultDateFormat[index] : dataFormat[index];
            }
            return dataFormat
        }

        function initTreeJs(name){
            var tree;
            if(checkTreeNameUsed(name)){return;}
            window[name] = outer;
            initFoldIcon($('.tree'));
        }

        function checkTreeNameUsed(name){
            if(window[name]){
                console.error("The window object name [" + name + "] has been used, tree.js can't be loaded! You can try another name." );
                return true;
            }
            return false;
        }

        function initFoldIcon(target){
            target.off('click', 'span>i.fa').on('click', 'span>i.fa', function(e){
                var ele = $(e.target);
                if(ele.hasClass('fa-minus-circle')){
                    ele.removeClass('fa-minus-circle').addClass('fa-plus-circle').parent().next('ul').hide(200);
                }else if(ele.hasClass('fa-plus-circle')){
                    ele.removeClass('fa-plus-circle').addClass('fa-minus-circle').parent().next('ul').show(200);
                }
            })
        }

        function getJqueryObjectBySelector(selector){
            var ele = $(selector);
            if(typeof selector != 'string'){
                console.error("The first parameter jquery selector [" + selector +  "] must be a string!" );
                return;
            }
            if(!ele.hasClass('tree')){
                ele = ele.find('.tree');
            }
            if(ele.length != 1){
                console.error("The selector [" + selector +  "] expect only one element!" );
                return;
            }
            return ele;
        }

        function setData(selector, data, dataFormat){
            var ele = getJqueryObjectBySelector(selector);
            if(!ele){return;}
            if(!data){return;}
            if(!data.length){
                data = [data];
            }
            dataFormat = getDataFormat(dataFormat);
            dataFormat.topElement = true;
            ele.empty().append(getTreeList(data, dataFormat));
            initFoldIcon(ele);
        }

        function getTreeList(data, dataFormat){
            var i, single, name, children, childDataFormat,
                array = [];
            childDataFormat = dataFormat.child || dataFormat;
            if(dataFormat.unfold){
                array.push('<ul>');
            }else if(dataFormat.topElement){
                dataFormat.topElement = false;
                array.push('<ul>');
            }else{
                array.push('<ul style="display:none;">');
            }
            for(i=0; i<data.length; i++){
                single = data[i];
                if(typeof dataFormat.name == 'function'){
                    name = dataFormat.name(single);
                }else if(typeof dataFormat.name == 'string'){
                    name = single[dataFormat.name];
                }else{
                    name = single['name'];
                }
                if(typeof dataFormat.childName == 'string'){
                    children = single[dataFormat.childName];
                }else{
                    children = single['children'];
                }
                array.push('<li>');
                array.push('<span>');
                if(children && children.length > 0){
                    if(dataFormat.unfold){
                        array.push('<i class="fa fa-minus-circle"></i>');
                    }else{
                        array.push('<i class="fa fa-plus-circle"></i>');
                    }
                    array.push(name);
                    array.push('</span>');
                    array.push(getTreeList(children, childDataFormat));
                }else{
                    array.push(name);
                    array.push('</span>');
                }
                array.push('</li>');
            }
            array.push('</ul>');
            return array.join('');
        }

        initTreeJs(name);
    }('tree'))

    var dataTest = '{$Data}';
    console.log(1111);
    var data = $.parseJSON(dataTest);             //对象转换成字符串
    console.log(data);
    tree.setData('.tree', data);
</script>
</body>
</html>
